<template>
  <div>
    <el-tabs v-model="beltDriveType">
      <el-tab-pane :label="$t('message.BeltDriveTool.flatBeltDrive')" name="flatBeltDrive"/>
      <el-tab-pane :label="$t('message.BeltDriveTool.vBeltDrive')" name="vBeltDrive"/>
    </el-tabs>
    <CmdDlgFlatBeltDriveTool v-if="beltDriveType ==='flatBeltDrive'"/>
    <CmdDlgVBeltDriveTool v-if="beltDriveType ==='vBeltDrive'"/>
  </div>
</template>

<script>
import CmdDlgFlatBeltDriveTool from "./CmdDlgFlatBeltDriveDesignTool.vue";
import CmdDlgVBeltDriveTool from "./CmdDlgVBeltDriveDesignTool.vue";
import {beltDriveCommand} from "../../../Command/BeltDriveDesign/BeltDriveCommand";
export default {
  name: "BeltDriveDesignTool",
  components: {
    CmdDlgFlatBeltDriveTool,
    CmdDlgVBeltDriveTool,
  },
  data() {
    return {
      beltDriveType: 'flatBeltDrive'
    };
  },
  mounted() {
    beltDriveCommand.init(500,320,1200,() => {
      beltDriveCommand.changePluginContainerHeight({
        minWidth: this.$el.clientWidth, maxHeight: this.$el.clientHeight, width: 350,
      });
    });
  },
  watch: {
    'beltDriveType'() {
      console.log(this.beltDriveType);
    }
  }
};
</script>